<!-- <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>

    <script src="./assets/lib/echarts/echarts.min.js"></script>
    <script>
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.querySelector('#main'));

      // 指定图表的配置项和数据
    const  option = {
  title: {
    text: '期望薪资 Salary'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: { readOnly: false },
      magicType: { type: ['line', 'bar'] },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] //名字
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value} ' //y轴
    }
  },
  series: [
    {
      name: '期望薪资',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      markPoint: {
        // data: [
        //   { type: 'max', name: 'Max' },
        //   { type: 'min', name: 'Min' }
        // ]
      },
      markLine: {
        // data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: '实际薪资',
      type: 'line',
      data: [1, -2, 2, 5, 3, 2, 0],
      markPoint: {
        data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
      },
      markLine: {
        data: [
        //   { type: 'average', name: 'Avg' },
          [
            {
              symbol: 'none',
              x: '90%',
              yAxis: 'max'
            },
            {
              symbol: 'circle',
              label: {
                position: 'start',
                formatter: 'Max'
              },
              type: 'max',
              name: '最高点'
            }
          ]
        ]
      }
    }
  ]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
    </script>
  </body>
</html> -->
<!-- 饼图 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./assets/lib/echarts/echarts.min.js"></script>
  <script>
     // 基于准备好的dom，初始化echarts实例
     const myChart = echarts.init(document.querySelector('#main'));
      const option = {
  legend: {
    top: 'bottom'
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 250],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 8
      },
      data: [
        { value: 40, name: 'rose 1' },
        { value: 38, name: 'rose 2' },
        { value: 32, name: 'rose 3' },
        { value: 30, name: 'rose 4' },
        { value: 28, name: 'rose 5' },
        { value: 26, name: 'rose 6' },
        { value: 22, name: 'rose 7' },
        { value: 18, name: 'rose 8' }
      ]
    }
  ]
};
  </script>
</body>
</html>